<template>
  <view :class="theme">
    <u-sticky h5NavHeight="0">
      <u-tabs @change="changeTabs" :list="orders" name="title" height="88" :is-scroll="false" :current="tabCurrent"
        bg-color="#fff" font-size="28" active-color="#3b86f6" inactive-color="#666666" />
    </u-sticky>

    <view class="mt-30 mb-30">
      <view v-for="order in orders[tabCurrent].list" :key="order.id" class="bg-2 br-20 ml-30 mr-30 mb-20 p-40">
        <view class="fd-row">
          <u-image radius="10" width="176" height="176" :src="order.goods_image" />
          <view class="ml-40 jc-sa">
            <label class="ai-start fs-28 color-6">
              <text class="f1 multi-ellipsis">{{ order.goods_name || "-" }}</text>
            </label>
            <label class="mt-30 jc-end">
              <text class="color-4 fs-32 fw-700">￥{{ order.goods_price }}</text>
            </label>
          </view>
        </view>
        <view class="fd-row jc-end ai-center mt-60">
          <text class="color-5">{{ { 1: "待收货", 2: "已完成", 5: "待发货" }[order.status as 1 | 2 | 5] || "" }}</text>
          <button v-if="+order.status === 1" @click="confirmReceive(order.id)" hover-class="tap-hover"
            class="bg-6 color-2 fs-28 lh-2 mr-0 br-30">确认收货</button>
        </view>
      </view>

      <view class="mt-30 mb-30 ai-center">
        <u-image v-if="!orders[tabCurrent].list.length" :showLoading="false" width="400" height="400" class="mt-60 mb-30"
          src="/static/img/blank.png" mode="aspectFit" />
        <u-loadmore :status="orders[tabCurrent].cache.status" />
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>

import { useMapState } from "@/common/libs/store";
import { pager } from "@/common/libs/utils";
import { onLoad, onReachBottom } from "@dcloudio/uni-app";
import { ref, reactive } from "vue";
const { $config = {} } = getApp().globalData || {};

const { theme } = useMapState(["theme"]);

const orders = reactive([
  {
    title: "全部",
    page: 0,
    limit: 20,
    list: [] as any[],
    cache: {
      page: 1,
      list: [] as any[],
      status: "nomore"
    },
    status: 0,
    next: false,
  },
  {
    title: "待发货",
    page: 0,
    limit: 20,
    list: [] as any[],
    cache: {
      page: 1,
      list: [] as any[],
      status: "nomore"
    },
    status: 5,
    next: false,
  },
  {
    title: "待收货",
    page: 0,
    limit: 20,
    list: [] as any[],
    cache: {
      page: 1,
      list: [] as any[],
      status: "nomore"
    },
    status: 1,
    next: false,
  },
  {
    title: "已完成",
    page: 0,
    limit: 20,
    list: [] as any[],
    cache: {
      page: 1,
      list: [] as any[],
      status: "nomore"
    },
    status: 2,
    next: false,
  },
]);

const tabCurrent = ref(0);

const initOrders = () => {
  const item = orders[tabCurrent.value];

  item.page = 0;
  item.limit = 20;
  item.list = [];
  item.cache = {
    page: 1,
    list: [],
    status: "nomore"
  };
  item.next = false;
  getOrders();
}

const changeTabs = (index: number) => {
  if (index === tabCurrent.value) return;
  if (orders[tabCurrent.value].cache.status === "loading") return;
  tabCurrent.value = index;
  initOrders();
}

onLoad(({ type }: any) => {
  type && (tabCurrent.value = +type);
  initOrders();
});

const getOrders = () => {
  const item = orders[tabCurrent.value];
  pager({ url: "/myOrder", data: { status: item.status } }, item);
}

onReachBottom(() => getOrders());

const confirmReceive = (id: number) => {
  uni.showModal({
    title: "温馨提示",
    content: "确定已收到商品？",
    success({ confirm }) {
      confirm && uni.request({
        url: "/confirmGoods",
        data: { id },
        success() {
          initOrders();
        }
      })
    }
  });
}

</script>

<style lang="scss" scoped>
// scss
</style>